웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
[VueJS] 부모 자식 컴포넌트간의 데이터 전달하는 방법, sync modifier 수식어 사용
Last Modified : 2022-02-04 / Created : 2019-11-26VueJS에서 부모와 자식 컴포넌트 사이에 데이터를 전달하는 방법중 sync modifider(수식어)를 사용하는 방법에 대하여 알아봅니다.
먼저 sync 수식어는 부모와 자식 컴포넌트 사이의 양방향 데이터 바인딩이 가능하도록 해줍니다. 다시말해 부모에서 자식으로 또는 자식에서 부모로 데이터를 변경, 업데이트 할 수 있다는 것입니다.
부모와 자식 사이의 데이터를 전달하는 방법은 여러가지가 존재합니다. 예를들어 v-model을 사용할 수도 있고 아니면 props에 값을 변경하기 위해 sitename 이름의 props에 추가로 updateSitename 이벤트를 props로 전달하는 방법도 있습니다. 여러 방법이 있지만 sync를 사용하는 이유는 매우 쉽고 간단하게 사용할 수 있기 때문입니다.
참고1. 상태불변성(immutability)을 고려한다면 부모의 값까지 변경하는 양방향 바인딩은 에러 및 유지보수, 관리 등의 사유로 주의가 필요합니다.
참고2. 사실 sync는 부모와 자식 사이의 축약 형태(shortcut)와 동일합니다. 아래의 예제에서 알 수 있듯이 sync를 적용하더라도 자식 컴포넌트에서 값을 변경할 경우 $emit()을 사용해야 하는 것은 동일합니다.
다음으로 sync의 간단한 문법을 알아봅니다. sync 수식어가 적용된 아래 코드를 보시면 sync가 얼마나 쉽게 적용했는지 알 수 있습니다.
이처럼 VueJS의 장점에서 sync와 같은 편리한 수식어를 빼놓을 수 없는데요 이처럼 간단한 수식어 사용만으로 siteName이란 props를 부모와 자식 컴포넌트가 서로 동기화하여 사용할 수 있습니다.
그럼 간단한 예제 코드를 살펴보며 어떻게 사용하는지 알아봅니다. 먼저 부모 컴포넌트에 아래와 같이 자식 컴포넌트 child-component를 추가합니다.
@ parentComponent.vue
이제 mySitename 이름의 prop를 사용하여 자식 컴포넌트에 'webisfree.com' 데이터 값이 추가되었습니다. 실행하면 아래와 같이 화면에 나타나게 됩니다.
다음으로 자식 컴포넌트 코드입니다.
@ child-component.vue
자식 컴포넌트에서 살펴볼 부분은 아래 부분 입니다. 아래와 같이 $emit()을 사용하여 값을 업데이트하게 됩니다. 다만 이때 update:propName 형태로 사용해야 합니다.
이처럼 자식 컴포넌트에서 sync가 적용된 prop의 값을 바꾸기 위해서 다음과 같이 문법을 사용해야 합니다.
this.$emit('update:prop이름', 변경할 값);
이제 버튼을 클릭할 경우 update 함수가 동작하며 부모 컴포넌트에 적용된 mySitename의 값을 빈 값인 ''로 업데이트 하게됩니다.
클릭하면 아래와 같이 webisfree.com이 지워지고 나타나게 됩니다. 부모와 자식 컴포넌트 모두 값이 바뀌었죠. 만약 버튼을 클릭할 경우 아래와 같이 나타납니다.
이처럼 간단하게 양방향 컴포넌트 사이의 바인딩이 되었습니다. 여기까지 sync 수식어에 대하여 간략하게 알아봤습니다.
# Vue에서 sync 수식어를 사용하여 컴포넌트 데이터 전달
먼저 sync 수식어는 부모와 자식 컴포넌트 사이의 양방향 데이터 바인딩이 가능하도록 해줍니다. 다시말해 부모에서 자식으로 또는 자식에서 부모로 데이터를 변경, 업데이트 할 수 있다는 것입니다.
! sync 양방향 바인딩과 다른 방법의 차이점은?
부모와 자식 사이의 데이터를 전달하는 방법은 여러가지가 존재합니다. 예를들어 v-model을 사용할 수도 있고 아니면 props에 값을 변경하기 위해 sitename 이름의 props에 추가로 updateSitename 이벤트를 props로 전달하는 방법도 있습니다. 여러 방법이 있지만 sync를 사용하는 이유는 매우 쉽고 간단하게 사용할 수 있기 때문입니다.
참고1. 상태불변성(immutability)을 고려한다면 부모의 값까지 변경하는 양방향 바인딩은 에러 및 유지보수, 관리 등의 사유로 주의가 필요합니다.
참고2. 사실 sync는 부모와 자식 사이의 축약 형태(shortcut)와 동일합니다. 아래의 예제에서 알 수 있듯이 sync를 적용하더라도 자식 컴포넌트에서 값을 변경할 경우 $emit()을 사용해야 하는 것은 동일합니다.
다음으로 sync의 간단한 문법을 알아봅니다. sync 수식어가 적용된 아래 코드를 보시면 sync가 얼마나 쉽게 적용했는지 알 수 있습니다.
<child-component :my-sitename.sync="mySitename" />
이처럼 VueJS의 장점에서 sync와 같은 편리한 수식어를 빼놓을 수 없는데요 이처럼 간단한 수식어 사용만으로 siteName이란 props를 부모와 자식 컴포넌트가 서로 동기화하여 사용할 수 있습니다.
! sync 수식어 예제보기
그럼 간단한 예제 코드를 살펴보며 어떻게 사용하는지 알아봅니다. 먼저 부모 컴포넌트에 아래와 같이 자식 컴포넌트 child-component를 추가합니다.
@ parentComponent.vue
<template>
<div>
접속중인 {{ mySiteName }} 사이트입니다.
<br />
<child-component :my-sitename.sync="mySitename" />
</div>
</template>
<script>
export default {
data: {
return function() {
mySitename: 'webisfree.com'
}
}
}
</script>
<div>
접속중인 {{ mySiteName }} 사이트입니다.
<br />
<child-component :my-sitename.sync="mySitename" />
</div>
</template>
<script>
export default {
data: {
return function() {
mySitename: 'webisfree.com'
}
}
}
</script>
이제 mySitename 이름의 prop를 사용하여 자식 컴포넌트에 'webisfree.com' 데이터 값이 추가되었습니다. 실행하면 아래와 같이 화면에 나타나게 됩니다.
접속중인 webisfree.com 사이트입니다.
webisfree.com
[ 바꾸기 ]
webisfree.com
[ 바꾸기 ]
다음으로 자식 컴포넌트 코드입니다.
@ child-component.vue
<template>
<div>
{{ mySitename }}
<br /><br />
<button @click="updateName">[ 바꾸기 ]</button>
</div>
</template>
<script>
export default {
props: [ 'mySitename' ],
methods: {
updateName: function() {
this.$emit('update:mySitename', '');
}
}
}
</script>
<div>
{{ mySitename }}
<br /><br />
<button @click="updateName">[ 바꾸기 ]</button>
</div>
</template>
<script>
export default {
props: [ 'mySitename' ],
methods: {
updateName: function() {
this.$emit('update:mySitename', '');
}
}
}
</script>
자식 컴포넌트에서 살펴볼 부분은 아래 부분 입니다. 아래와 같이 $emit()을 사용하여 값을 업데이트하게 됩니다. 다만 이때 update:propName 형태로 사용해야 합니다.
this.$emit('update:mySitename', '');
이처럼 자식 컴포넌트에서 sync가 적용된 prop의 값을 바꾸기 위해서 다음과 같이 문법을 사용해야 합니다.
this.$emit('update:prop이름', 변경할 값);
이제 버튼을 클릭할 경우 update 함수가 동작하며 부모 컴포넌트에 적용된 mySitename의 값을 빈 값인 ''로 업데이트 하게됩니다.
클릭하면 아래와 같이 webisfree.com이 지워지고 나타나게 됩니다. 부모와 자식 컴포넌트 모두 값이 바뀌었죠. 만약 버튼을 클릭할 경우 아래와 같이 나타납니다.
접속중인 사이트입니다.
[ 바꾸기 ]
[ 바꾸기 ]
이처럼 간단하게 양방향 컴포넌트 사이의 바인딩이 되었습니다. 여기까지 sync 수식어에 대하여 간략하게 알아봤습니다.
아래의 글도 찾고 계시지 않나요?
